// ImageTextButton.qml
import QtQuick 2.15
import QtQuick.Controls 2.15

Item {
    id: root
    width: contentCol.implicitWidth + 20
    height: contentCol.implicitHeight + 10

    // 自定义属性
    property alias iconSource: img.source    // 图标路径
    property alias text: label.text           // 按钮文字
    property int orientation: Qt.Vertical    // 固定为垂直布局
    property color normalColor: "white"       // 正常状态颜色
    property color hoverColor: "#3EB33B"      // 悬停状态颜色
    property color pressedColor: "#3EB33B"    // 按下状态颜色
    property int spacing: 5                   // 图文间距

    // 点击信号
    signal clicked()

    // 背景矩形
    Rectangle {
        id: bg
        anchors.fill: parent
        radius: 5
        color: {
            if (mouseArea.pressed) return root.pressedColor
            else if (mouseArea.containsMouse) return root.hoverColor
            else return root.normalColor
        }
        Behavior on color { ColorAnimation { duration: 150 } }
    }

    // 内容布局（改为Column实现垂直排列）
    Column {
        id: contentCol
        anchors.centerIn: parent
        spacing: root.spacing

        // 图标在上
        Image {
            id: img
            sourceSize: Qt.size(30, 30)
            anchors.horizontalCenter: parent.horizontalCenter
            antialiasing: true
        }

        // 文字在下
        Label {
            id: label
            font.pixelSize: 14
            color: "black"
            horizontalAlignment: Text.AlignHCenter
            width: parent.width  // 文字区域与图标同宽
        }
    }

    // 鼠标交互区域
    MouseArea {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true
        onClicked: {
            root.clicked()
            scaleAnim.start()
        }
    }

    // 点击缩放动画
    SequentialAnimation {
        id: scaleAnim
        PropertyAnimation {
            target: bg
            property: "scale"
            to: 0.95
            duration: 50
        }
        PropertyAnimation {
            target: bg
            property: "scale"
            to: 1.0
            duration: 50
        }
    }
}
